// 系统消息组件

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Info,
  AlertTriangle,
  AlertCircle,
  CheckCircle,
  X,
  Clock
} from 'lucide-react';

const SystemMessages: React.FC = () => {
  const { systemMessages, acknowledgeMessage, userRole } = useHmiState();

  const getMessageIcon = (type: string) => {
    switch (type) {
      case 'info':
        return <Info size={18} className="text-blue-400" />;
      case 'warning':
        return <AlertTriangle size={18} className="text-warning-400" />;
      case 'error':
        return <AlertCircle size={18} className="text-danger-400" />;
      case 'success':
        return <CheckCircle size={18} className="text-success-400" />;
      default:
        return <Info size={18} className="text-gray-400" />;
    }
  };

  const getMessageStyle = (type: string) => {
    switch (type) {
      case 'info':
        return 'border-blue-500/30 bg-blue-500/10';
      case 'warning':
        return 'border-warning-500/30 bg-warning-500/10';
      case 'error':
        return 'border-danger-500/30 bg-danger-500/10';
      case 'success':
        return 'border-success-500/30 bg-success-500/10';
      default:
        return 'border-gray-500/30 bg-gray-500/10';
    }
  };

  const formatTime = (date: Date) => {
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };

  // 乘客模式下隐藏系统消息中心
  if (userRole.type === 'passenger') {
    return null;
  }

  // 只显示未确认的消息
  const unacknowledgedMessages = systemMessages.filter(msg => !msg.acknowledged);

  // 如果没有消息，显示空状态
  if (unacknowledgedMessages.length === 0) {
    return (
      <div className="control-panel">
        <h3 className="text-lg font-semibold mb-4 text-white">系统消息</h3>
        <div className="text-center py-8 text-gray-400">
          <Info size={32} className="mx-auto mb-2 opacity-50" />
          <p>暂无新消息</p>
        </div>
      </div>
    );
  }

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">系统消息</h3>

      <div className="space-y-3 max-h-64 overflow-y-auto">
        {unacknowledgedMessages.map((message) => (
          <div
            key={message.id}
            className={`p-3 rounded-lg border ${getMessageStyle(message.type)} relative`}
          >
            {/* 消息头部 */}
            <div className="flex items-start gap-3 mb-2">
              {getMessageIcon(message.type)}
              <div className="flex-1">
                <h4 className="text-sm font-medium text-white">{message.title}</h4>
                <div className="flex items-center gap-2 mt-1">
                  <Clock size={12} className="text-gray-400" />
                  <span className="text-xs text-gray-400">
                    {formatTime(message.timestamp)}
                  </span>
                </div>
              </div>

              {userRole.type === 'safety_officer' && (
                <button
                  onClick={() => acknowledgeMessage(message.id)}
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  <X size={16} />
                </button>
              )}
            </div>

            {/* 消息内容 */}
            <p className="text-sm text-gray-300 ml-6">{message.message}</p>

            {/* 紧急消息的特殊样式 */}
            {message.type === 'error' && (
              <div className="mt-2 ml-6">
                <div className="flex items-center gap-2 text-xs text-danger-400">
                  <div className="w-2 h-2 bg-danger-500 rounded-full animate-pulse" />
                  需要立即处理
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* 消息统计 */}
      <div className="mt-4 pt-3 border-t border-gray-700">
        <div className="text-xs text-gray-400 text-center">
          {unacknowledgedMessages.length} 条未读消息
        </div>
      </div>
    </div>
  );
};

export default SystemMessages;
